<template>
    <ContentBase>
        <div class="content">
            <div class="content-top">
                <div class="mb-3">
                    <label for="textTitle" class="form-label" style="font-weight: bold;">标题</label>
                    <input type="text" class="form-control" v-model="textTitle" id="textTitle" placeholder="请输入标题">
                </div>
                <div class="mb-3">
                    <label for="textSummary" class="form-label" style="font-weight: bold;">摘要</label>
                    <textarea class="form-control" v-model="textSummary" id="textSummary" rows="3" placeholder="不超过50字"></textarea>
                </div>
                <div class="input-group flex-nowrap" style="margin-bottom: 15px;">
                    <span class="input-group-text" id="textAuthor" style="font-weight: bold;">作者</span>
                    <input type="text" class="form-control" v-model="textAuthor" placeholder="请输入作者">
                </div>
                <div class="input-group flex-nowrap">
                    <span class="input-group-text" id="textSource" style="font-weight: bold;">出处</span>
                    <input type="text" class="form-control" v-model="textSource" placeholder="请输入出处">
                </div>
            </div>
            <div class="content-center">
                <div style="border: 1px solid #ccc">
                    <Toolbar
                    style="border-bottom: 1px solid #ccc"
                    :editor="editorRef"
                    :defaultConfig="toolbarConfig"
                    mode="default"
                    />
                    <Editor
                    style="height: 500px; overflow-y: hidden;"
                    v-model="valueHtml"
                    :defaultConfig="editorConfig"
                    mode="default"
                    @onCreated="handleCreated"
                    @onChange="handleChange"
                    />
                </div>
            </div>
            <div class="content-bottom">
                <div style="color: red;">{{ error_message }}</div>
                <button type="button" class="btn btn-outline-primary btn-lg" @click="clickToSubmit">提交</button>
            </div>
        </div>
    </ContentBase>
</template>

<script setup>
import ContentBase from '@/components/ContentBase';
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import $ from 'jquery';
import { useStore } from 'vuex';
// import router from '@/router/index';
import { useRoute } from 'vue-router';

const store = useStore();
const route = useRoute();
const id = route.params.id;
const records = store.state.user.records;
const current_record = ref(null);
const error_message = ref(null);
for (let record of records) {
    if (record.id == id) {
        current_record.value = record;
        break;
    }
}

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref(current_record.value.htmlContent);

// 工具栏配置
const toolbarConfig = {
// 你可以在这里添加更多工具配置
}

  // 编辑器配置，配置图片上传
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            server: "http://localhost:3000/api/upload/image",
            fieldName: "file",
        }
    }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

// 创建编辑器实例
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

const textHtml = ref(null);
const handleChange = (editor) => {
    textHtml.value = editor.getHtml();
}

const clearMessage = () => {
    error_message.value = null;
}

const textTitle = ref(current_record.value.title);
const textSummary = ref(current_record.value.summary);
const textAuthor = ref(current_record.value.author);
const textSource = ref(current_record.value.source);

const clickToSubmit = () => {
    error_message.value = null;
    $.ajax({
        url: "http://localhost:3000/api/manage/event/update-event",
        type: "POST",
        data: {
            id: current_record.value.id,
            title: textTitle.value,
            summary: textSummary.value,
            htmlContent: textHtml.value,
            author: textAuthor.value,
            source: textSource.value
        },
        headers: {      // jwt验证写法
            'Authorization': "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message == "success") {
                // router.push({name: "events"});
                error_message.value = "修改成功!";
                setTimeout(clearMessage, 4000);
            } else {
                error_message.value = resp.error_message;
                setTimeout(clearMessage, 4000);
            }
        },
        error(resp) {
            console.log(resp);
        }
    })
}

</script>

<style scoped>

.content {
    padding: 30px;
}

.content-center {
    margin: 20px 0;
}

.content-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

</style>
